<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">添加备课计划</block>
    </cu-custom>

    <view class="view-input">
      <input type="text" placeholder="阿狸的备课计划" class="inpu-name" v-model="viewInput" />
    </view>
    <!-- 课程类型 -->
    <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;">
      <view class="">
        课程类型*
      </view>
      <view>
        <view class="uni-list">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
                <view>
                  <input style="height: 100upx;line-height: 100upx;text-align: right;" type="text" disabled v-model="array[index].name"
                    placeholder="请选择课程类型" />
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 总课时 -->
    <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;">
      <view class="">
        总课时*
      </view>
      <view>
        <input style="height: 100upx;line-height: 100upx;width: 140upx;text-align: right;" type="number" v-model="courseCount"
          placeholder="请输入课时" />
      </view>
    </view>
    <!-- 课单价 -->
    <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;">
      <view class="">
        课单价
      </view>
      <view>
        <input style="height: 100upx;line-height: 100upx;width: 140upx;text-align: right;" type="number" v-model="coursePrice"
          placeholder="调整课单价" />
      </view>
    </view>
    <!-- 有效期 -->
    <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;">
      <view class="">
        有效期
      </view>
      <view class="">
        <view class="uni-list">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker mode="date" :value="validity" :start="startDate" :end="endDate" @change="bindDateChange">
                <view>
                  <input style="height: 100upx;line-height: 100upx;text-align: right;" type="text" disabled :value="validity"
                    placeholder="请选择有效期" />
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 上课教练 -->
    <view style="width: 100%;padding: 0 4%;">
      <view style="height: 100upx;line-height: 100upx;">
        上课教练
      </view>
      <view style="display: flex; flex-wrap: wrap;">
        <view class="items">
          <view class="avatars u-f-ajc">
            {{jlUserName}}
          </view>
          <view style="padding: 0 20rpx 0 16rpx;font-size: 22rpx;">
            {{jlUserName}}
          </view>
        </view>
        <!-- <view @click="jump" :data-src='"/pagesA/Preparation_plan/Choose_coach?id="+item.userId' style="display: flex;height: 60upx;line-height: 60upx;border-radius: 30upx;background-color: #F6F6F6;">
					<view style="height: 60upx;line-height: 60upx;border-radius: 30upx;width: 60upx;text-align: center;font-size: 38upx;">
						+
					</view>
					<view style="padding: 0 40upx 0 0upx;font-size: 22upx;">
						添加
					</view>
				</view> -->
      </view>
    </view>
    <!-- 备注 -->
    <view style="width: 100%;padding: 0 4%;margin-bottom: 190rpx;">
      <view style="height: 100upx;line-height: 100upx;">
        备注
      </view>
      <view>
        <textarea value="" placeholder="请输入备注" style="background-color: #ddd;width: 100%;border-radius: 15upx;line-height: 30upx;padding: 10upx 20upx;"
          v-model="remark" />
        </view>
		</view>
		
		<button @click="submit" type="default" style="width: 80%;margin-left: 10%;background-color: #39BB9E;color: #FFFFFF;position: fixed;bottom: 50upx; z-index: 99;">完成</button>
</view>
</template>

<script>
	import timeJS from "../../common/time.js"
	export default {
	    data() {
	        return {
	            title: 'picker',
							coach:'',
	            array: [
                {
                "id": 37,
                "name": "运动处方"
                }, {
                  "id": 38,
                  "name": "心肺适能"
                }, {
                  "id": 39,
                  "name": "体态改善"
                }, {
                  "id": 40,
                  "name": "运动康复"
                },
              ],
	            arrayList: [],
							index: 0,
	            date: timeJS.gettime.getDate({
	            	format: true
	            }),
							courseTypeName:'',
							courseCount:'',
							coursePrice:'',
							validity:'',
							jlUserName: uni.getStorageSync("userName"),
							viewInput: `${uni.getStorageSync("phyUser").username}的训练计划`,
							remark: '',
              startDate:timeJS.gettime.getDate('start'),
              endDate:timeJS.gettime.getDate('end'),
	        }
	    },
			onLoad() {
				this.getArray()
			},
	    methods: {
				async getArray() {
					let {data: {datas}} = await this.$myRuquest({
						url: "/coach/course/getCourseTypeByBranId",
						data: {
							bId: 1
						}
					})
					this.array = datas;
          this.viewInput = `${uni.getStorageSync("phyUser").username}的${this.array[this.index].name}训练计划`
				},
					async submit(){
						var data = {
								bId : 1,
								courseCount: this.courseCount,
								coursePrice: this.coursePrice,
								courseType: this.courseTypeName ? this.array.find(item => item.name == this.courseTypeName).id : '',
								courseTypeName: this.courseTypeName,
								gymId: 0,
								memberId: uni.getStorageSync("phyUser").userId,
								name: this.viewInput,
								remark: this.remark,
								teachIdList: [uni.getStorageSync("openid")],
								validity: this.validity ? timeJS.gettime.getNumberDays(this.validity, this.date) : '',
							}
							console.log('查看要传的数据', data)
							for (let i in data) {
								if (!data[i] && data[i] != 0) {
									uni.showToast({
										title: "请填写完整~",
										icon: "loading"
									})
								} else {
									uni.showLoading({
										title: "添加中~"
									})
								}
							}
							let res = await this.$myRuquest({
								url: "/coach/training/addTrainingPlan",
								method: 'POST',
								data,
								header:{"Content-Type":"application/json"},
							})
							uni.hideLoading()
							uni.redirectTo({
								url: './Project_details'
							})
					},
	        bindPickerChange: function(e) {
	            this.index = e.target.value
							this.courseTypeName = this.array[this.index].name
							this.viewInput = `${uni.getStorageSync("phyUser").username}的${this.courseTypeName}训练计划`
	        },
	        bindDateChange: function(e) {
						console.log('picker发送选择改变，携带值为', e.target.value)
	        	this.validity = e.detail.value
	        },
					jump(e){
						console.log(e.currentTarget.dataset.src)
						if ( e.currentTarget.dataset.src == 'Not-yet-open') {
							uni.showModal({
								title:'提示',
								content:'功能即将开放',
								showCancel: false,
								confirmColor:"#DD524D",
									success() {
										return
									}
							})
						} else {
							uni.navigateTo({
								url: e.currentTarget.dataset.src
							});
						}
					},
	    }
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.items {
		display: flex;height: 60upx;
		line-height: 60upx;
		border-radius: 30upx;
		background-color: #F6F6F6;
	}
	.avatars {
		width: 60upx;
		height: 60upx;
		border-radius: 30upx;
		background-color: #1CBBB4;
		color: #fff;
		font-size: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.view-input {
		width: 100%;
		padding: 80rpx 150rpx 30rpx;

		.inpu-name {
			text-align: center;
			color: #999999;
			font-size: 32rpx;
		}
	}
	
</style>
